<template>
    <!-- 导航区 -->
     <div class="sidebarSon">
        <ul v-for="item in newArr">
            <!-- 第一种字符串传值 -->
            <!-- <li><router-link :to="`/query/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link></li> -->
            <li>
                <button @click="funShow(item)">show info</button>
                <!-- 第二种传值方式，"对象的传值方式" 
                 path:'/query/detail',使用name跳转不管等级 -->
                <router-link 
                :to="{
                    name:'detailName',
                    query:{
                        id:item.id,
                        title:item.title,
                        content:item.content
                    }
                }"
                >{{item.title}}
            </router-link>
        </li>
        </ul>
     </div>
     <!-- 展示区 -->
      <div class="contentSon">
        <router-view></router-view>
      </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import { RouterLink,RouterView,useRouter } from 'vue-router';
const newArr = [
    {id:'1',title:"come on lxy", content:"why you need to do this?"},
    {id:'2',title:"study hard",content:"study can make you rich"},
    {id:'3',title:"how to study English",content:"try create sentences"}
]
const router = useRouter();
// onMounted(()=>{
//     setTimeout(() => {
//         // 编程式路由导航，第一种字符串传值方式

//         router.push('/params');    
//     },3000);
// })

//TS类型定义，定义一个接口，用来约束传值的数据格式
interface newMsg{
    id:string,
    title:string,
    content:string
}

// 编程式路由导航，第二种对象传值方式
function funShow(item:newMsg){
    router.push({
        name:'detailName',
        query:{
           id:item.id,
           title:item.title,
           content:item.content
        }        
    })
}
</script>

<style scoped>
.sidebarSon{
    position: fixed;
}
.contentSon{
    margin-left: 300px;
    position: fixed;
}
</style>